<template>
  <div class="">
    <div class="fwwcc" style="padding: 3px">
      <span style="width: 100px"> {{ "color" }}: </span>
      <el-input
        style="width: 150px"
        v-model="comstyle['color']"
        placeholder=""
        size="normal"
        @input="stylechange($event)"
      ></el-input>
    </div>
    <div class="fwwcc" style="padding: 3px">
      <span style="width: 100px"> {{ "背景色" }}: </span>
      <el-input
        style="width: 150px"
        v-model="comstyle['backgroundColor']"
        placeholder=""
        size="normal"
        @input="stylechange($event)"
      ></el-input>
    </div>
    <div class="fwwcc" style="padding: 3px">
      <span style="width: 100px"> {{ "padding" }}: </span>
      <el-input
        style="width: 150px"
        v-model="comstyle['padding']"
        placeholder=""
        size="normal"
        @input="stylechange($event)"
      ></el-input>
    </div>
    <div class="fwwcc" style="padding: 3px">
      <span style="width: 100px"> {{ "margin" }}: </span>
      <el-input
        style="width: 150px"
        v-model="comstyle['margin']"
        placeholder=""
        size="normal"
        @input="stylechange($event)"
      ></el-input>
    </div>
    <div class="fwwcc" style="padding: 3px">
      <span style="width: 100px"> {{ "fontSize" }}: </span>
      <el-input
        style="width: 150px"
        v-model="comstyle['fontSize']"
        placeholder=""
        size="normal"
        @input="stylechange($event)"
      ></el-input>
    </div>
    <!-- <div class="fwwcc" style="padding: 3px">
      <span style="width: 100px"> {{ "name" }}: </span>
      <el-input
        style="width: 150px"
        v-model="activeitem['name']"
        placeholder=""
        size="normal"
        @input="stylechange($event)"
      ></el-input>
    </div>
    <div class="fwwcc" style="padding: 3px">
      <span style="width: 100px"> {{ "code" }}: </span>
      <el-input
        style="width: 150px"
        v-model="activeitem['code']"
        placeholder=""
        size="normal"
        @input="stylechange($event)"
      ></el-input>
    </div> -->
  </div>
</template>
<script>
import optionmixin from "./optionmixin.js";

export default {
  mixins: [optionmixin],
  components: {},
  data() {
    return {
      comstyle: {
        color: "",
        backgroundColor: "",
        padding: "",
        margin: "",
        fontSize: "",
        // color: '',
      },
    };
  },
  computed: {},
  watch: {},
  mounted() {
    if (
      _.has(this.$store.state.editer.editeractived, "componentDetail") &&
      _.has(this.$store.state.editer.editeractived.componentDetail, "comstyle")
    ) {
      this.comstyle =
        this.$store.state.editer.editeractived.componentDetail.comstyle;
    }
  },
  methods: {
    stylechange() {
      if (!_.has(this.$store.state.editer.editeractived, "componentDetail")) {
        this.$store.state.editer.editeractived["componentDetail"] = {};
      }
      if (
        !_.has(
          this.$store.state.editer.editeractived.componentDetail,
          "comstyle"
        )
      ) {
        this.$store.state.editer.editeractived.componentDetail["comstyle"] = {};
      }

      this.$store.state.editer.editeractived.componentDetail["comstyle"] =
        this.comstyle;

      this.change();
    },
  },
};
</script>
<style lang='scss' scoped>
</style>